<template>
  <div class="cu-common-layout">
    <div class="cu-common-layout-center">
      <el-row class="cu-common-search-box" :gutter="16">
        <el-form @submit.native.prevent>
          <el-col :span="4">
            <el-form-item label="客户名称">
              <el-input v-model="query.customer" placeholder="客户名称" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
              <el-button icon="el-icon-refresh-right" @click="reset()">重置</el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div class="cu-common-layout-main cu-flex-main">
        <div class="cu-common-head">
          <div class="cu-common-head-right">
            <el-tooltip effect="dark" content="刷新" placement="top">
              <el-link icon="icon-ym icon-ym-Refresh cu-common-head-icon" :underline="false" @click="reset()" />
            </el-tooltip>
            <screenfull isContainer />
          </div>
        </div>
        <custom-table v-loading="listLoading" :data="list" :hasNO="false">
          <el-table-column type="expand" width="40">
            <template slot-scope="props">
              <el-table :data="props.row.payments" stripe size="mini" :element-loading-text="$t('common.loadingText')">
                <el-table-column prop="paymentDate" label="收款日期" align="center" width="120" :formatter="custom.tableDateFormat" />
                <el-table-column prop="amount" label="加盟金额" align="right" width="80"></el-table-column>
                <el-table-column prop="bond" label="保证金" align="right" width="80"></el-table-column>
                <el-table-column prop="paymentMethod" label="收款方式" align="center" width="100">
                  <template slot-scope="scope">
                    {{ scope.row.paymentMethod | dynamicText(methodOptions) }}
                  </template>
                </el-table-column>
                <el-table-column prop="flowState" label="审核状态" align="center" width="100">
                  <template slot-scope="scope">
                    <el-tag v-if="scope.row.flowState == 1">等待审核</el-tag>
                    <el-tag type="success" v-else-if="scope.row.flowState == 2">审核通过</el-tag>
                    <el-tag type="danger" v-else-if="scope.row.flowState == 3">审核驳回</el-tag>
                    <el-tag type="danger" v-else-if="scope.row.flowState == 4">流程撤回</el-tag>
                    <el-tag type="warning" v-else-if="scope.row.flowState == 5">审核终止</el-tag>
                    <el-tag type="info" v-else>等待提交</el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="createTime" label="提交时间" align="center" :formatter="custom.tableDateTimeFormat" width="120"></el-table-column>
                <el-table-column prop="createUserName" label="提交人" align="center" width="80"></el-table-column>
                <el-table-column label="操作" width="100" align="center">
                  <template slot-scope="scope">
                    <el-button type="text" @click="updatePaymentsHandle(scope.row.id, scope.row.flowState)" :disabled="[1, 2, 5].indexOf(scope.row.flowState) > -1">编辑</el-button>
                    <!-- <el-button type="text" @click="delPaymentHandle(scope.row.id)" :disabled="[1, 2, 5].indexOf(scope.row.flowState) > -1">删除</el-button> -->
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </el-table-column>
          <el-table-column prop="customerName" label="客户名称" align="left" width="120" show-overflow-tooltip />
          <el-table-column prop="brand" label="品牌" align="center" width="80">
            <template slot-scope="scope">
              {{ scope.row.brand | dynamicCodeText(brandOptions) }}
            </template>
          </el-table-column>
          <el-table-column prop="managerId" label="招商经理" align="left" width="100" />
          <el-table-column prop="areaText" label="行政区域" align="left" width="100" />
          <el-table-column prop="school" label="意向学校" width="230" show-overflow-tooltip></el-table-column>
          <el-table-column prop="actualPayment" label="实收金额" align="right" width="80"></el-table-column>
          <el-table-column prop="payMethod" label="付款方式" align="center" width="100">
            <template slot-scope="scope">
              {{ scope.row.payMethod | dynamicText(statusOptions) }}
            </template>
          </el-table-column>
          <el-table-column prop="isCompletePay" label="是否完款" align="center" width="100">
            <template slot-scope="scope" v-if="scope.row.isCompletePay">
              <el-checkbox v-model="scope.row.isCompletePay" disabled readonly></el-checkbox>
            </template>
          </el-table-column>

          <el-table-column prop="contractPolicy" label="加盟政策" align="left" show-overflow-tooltip />
          <el-table-column prop="finalPayDate" label="完款日期" align="left" :formatter="custom.tableDateFormat" width="120" />
          <el-table-column label="订单状态" prop="orderStatus" align="center" width="100">
            <template slot-scope="scope">
              {{ scope.row.orderStatus | dynamicText(orderStatusOptions) }}
            </template>
          </el-table-column>

          <el-table-column label="操作" fixed="right" width="100" align="center">
            <template slot-scope="scope">
              <el-button type="text" v-has="'btn_balance'" size="mini" @click="addPaymentsHandle(scope.row)">余款</el-button>
              <el-button type="text" v-has="'btn_edit'" size="mini" @click="addOrUpdateHandle(scope.row.id)">编辑</el-button>
              <el-button type="text" v-has="'btn_remove'" size="mini" @click="handleDel(scope.row.id)" class="cu-table-delBtn">删除</el-button>
              <!-- <el-button type="text" v-has="'btn_refund'" size="mini" @click="addRefundHandle(scope.row.id)" class="cu-table-delBtn">退款</el-button> -->
              <!-- <el-button type="text" v-has="'btn_detail'" size="mini" @click="recordsHandle(scope.row.id)">明细</el-button> -->
              <el-button type="text" v-has="'btn_sign'" size="mini" @click.native="signHandle(scope.row)">
                签约
              </el-button>
            </template>
          </el-table-column>
        </custom-table>
        <pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize" @pagination="initData" />
      </div>
    </div>
    <custom-form v-if="formVisible" ref="CustomForm" @refresh="refresh" />
    <refund-form v-if="refundFormVisible" ref="RefundForm" @refresh="refresh" />
    <records v-if="recordsVisible" ref="recordsTable" @refresh="refresh"></records>
    <flow-box v-if="flowVisible" ref="FlowBox" @close="colseFlow" />
  </div>
</template>
<script>
export { default } from './index.js'
</script>
<style scoped>
@import url(index.scss);
</style>
